import {
    GamepadIcon,
    MusicIcon,
    CreativeIcon,
    CategoryIcon,
    ViewersIcon,
    UserIcon,
    LiveIcon,
} from '@/components/icons';

export const metadata = {
    title: '直播分类 | 在线直播平台',
    description: '探索各种精彩直播分类，包括游戏、娱乐、音乐、电竞等多种类型的直播内容',
    keywords: '直播分类,游戏直播,娱乐直播,音乐直播,电竞直播,生活直播,创作直播',
    openGraph: {
        title: '直播分类 | 在线直播平台',
        description: '探索各种精彩直播分类，包括游戏、娱乐、音乐、电竞等多种类型的直播内容',
        type: 'website',
    },
};

export const dynamic = 'force-static';
export const revalidate = 3600;

const categoryIcons = {
    all: CategoryIcon,
    game: GamepadIcon,
    life: UserIcon,
    music: MusicIcon,
    esports: GamepadIcon,
    creative: CreativeIcon,
};

const categories = [
    { id: 'all', name: '全部分类', icon: CategoryIcon },
    { id: 'game', name: '游戏', icon: GamepadIcon },
    { id: 'life', name: '生活', icon: UserIcon },
    { id: 'music', name: '音乐', icon: MusicIcon },
    { id: 'esports', name: '电竞', icon: GamepadIcon },
    { id: 'creative', name: '创作', icon: CreativeIcon },
];

export default function CategoriesPage() {
    return (
        <div className="py-10">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h1 className="text-3xl font-bold text-white mb-8">浏览分类</h1>

                {/* Category Filters */}
                <div className="mb-8">
                    <div className="flex flex-wrap gap-4">
                        {categories.map(category => {
                            const Icon = category.icon;
                            return (
                                <button
                                    key={category.id}
                                    className={`inline-flex items-center px-4 py-2 rounded-full text-white text-sm font-medium ${
                                        category.id === 'all'
                                            ? 'bg-indigo-600 hover:bg-indigo-700'
                                            : 'bg-gray-800 hover:bg-gray-700'
                                    }`}
                                >
                                    <Icon className="w-4 h-4 mr-2" />
                                    {category.name}
                                </button>
                            );
                        })}
                    </div>
                </div>

                {/* Categories Grid */}
                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(item => (
                        <div
                            key={item}
                            className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-indigo-500 transition-all"
                        >
                            <div className="aspect-[4/5] bg-gray-700 relative">
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <GamepadIcon className="w-16 h-16 text-gray-600" />
                                </div>
                                <div className="absolute bottom-2 left-2">
                                    <div className="inline-flex items-center rounded bg-black/60 px-2 py-1 text-xs font-medium text-white">
                                        <ViewersIcon className="w-4 h-4 mr-1" />
                                        {Math.floor(Math.random() * 500 + 10)}K 观众
                                    </div>
                                </div>
                            </div>
                            <div className="p-4">
                                <h3 className="font-medium text-white text-lg mb-1">分类 {item}</h3>
                                <div className="flex items-center space-x-4">
                                    <div className="flex -space-x-2">
                                        {[1, 2, 3].map(avatar => (
                                            <div
                                                key={avatar}
                                                className="h-6 w-6 rounded-full bg-gray-600 ring-2 ring-gray-800 flex items-center justify-center"
                                            >
                                                <UserIcon className="w-4 h-4 text-gray-400" />
                                            </div>
                                        ))}
                                    </div>
                                    <div className="flex items-center space-x-1 text-gray-400">
                                        <LiveIcon className="w-4 h-4" />
                                        <p className="text-sm">
                                            {Math.floor(Math.random() * 1000 + 100)} 个直播中
                                        </p>
                                    </div>
                                </div>
                                <div className="mt-3">
                                    <div className="flex flex-wrap gap-2">
                                        <span className="inline-flex items-center px-2 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-300">
                                            <GamepadIcon className="w-3 h-3 mr-1" />
                                            标签1
                                        </span>
                                        <span className="inline-flex items-center px-2 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-300">
                                            <CategoryIcon className="w-3 h-3 mr-1" />
                                            标签2
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Load More */}
                <div className="mt-8 flex justify-center">
                    <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                        <CategoryIcon className="w-4 h-4 mr-2" />
                        加载更多
                    </button>
                </div>
            </div>
        </div>
    );
}
